<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${pageType === 'detail' ? '详情' : '编辑'}-${ruleForm.machineName}`"
		width="1100px"
		:show-content-loading="showLoading"
		:confirm-btn-loading="saveDialogState"
		:append-to-body="false"
		:show-close-btn="pageType === 'detail'"
		:show-cancel-btn="pageType !== 'detail'"
		:show-confirm-btn="pageType !== 'detail'"
		@on-close="onVisibleChange(false)"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
		@on-confirm="onConfirmBtn"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="110px" :show-message="false">
			<div ref="box1">
				<div class="margin-bottom-4 flex-between-center" style="align-items: flex-end;">
					<div class="flex-start-center" style="font-size: 13px;">
						<el-tag v-if="!ruleForm.code" type="primary" effect="plain" class="">
							<span class="el-icon-tickets item-gap"></span>
							<span>基本信息</span>
						</el-tag>
						<div v-else style="font-size: 16px;">
							<span class="el-icon-star-off item-gap"></span>
							<!--							<span>{{ ruleForm.code }}</span>-->
						</div>
						<!--<el-tag v-if="ruleForm.id" size="mini" type="info"><jk-state-bar :state="ruleForm.serviceState" :state-list="saleOrderStateList"></jk-state-bar></el-tag>-->
					</div>
				</div>
				<jk-card class="">
					<el-row ref="box2">
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="时间">
								<span class="read-only-2">{{ ruleForm.lastUpdateTime }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="设备">
								<span class="read-only-2">{{ ruleForm.machineName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="产品名称">
								<span class="read-only-2">{{ ruleForm.productName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="班次">
								<span class="read-only-2">{{ ruleForm.shiftName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="工序">
								<span class="read-only-2">{{ ruleForm.processName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="速度">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.strSpeed }}</span>
								<jk-input v-else v-model="ruleForm.strSpeed" type="textarea" :rows="2" size="medium" placeholder="请输入"></jk-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="当班产量(米)">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.outputM }}</span>
								<jk-input v-else v-model="ruleForm.outputM" type="textarea" :rows="2" size="medium" placeholder="请输入"></jk-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="当班效率(%)">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.machineEfficiency }}</span>
								<jk-input v-else v-model="ruleForm.machineEfficiency" type="textarea" :rows="2" size="medium" placeholder="请输入"></jk-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="当班产量(kg)">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.outputKg }}</span>
								<jk-input v-else v-model="ruleForm.outputKg" type="textarea" :rows="2" size="medium" placeholder="请输入"></jk-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="能耗(KW.H)">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.energy }}</span>
								<jk-input v-else v-model="ruleForm.energy" type="textarea" :rows="2" size="medium" placeholder="请输入"></jk-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="理论产量(kg)">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.fullQty }}</span>
								<jk-input v-else v-model="ruleForm.fullQty" type="textarea" :rows="2" size="medium" placeholder="请输入"></jk-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="开始产量表数">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.startOutputM }}</span>
								<jk-input v-else v-model="ruleForm.startOutputM" type="textarea" :rows="2" size="medium" placeholder="请输入"></jk-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="实时产量表数">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.endOutputM }}</span>
								<jk-input v-else v-model="ruleForm.endOutputM" type="textarea" :rows="2" size="medium" placeholder="请输入"></jk-input>
							</el-form-item>
						</el-col>
					</el-row>
				</jk-card>
			</div>
		</el-form>
	</jk-dialog>
</template>

<script>
    import { formatDate } from '../../../../utils/jk/jk-tool';
    import { saleOrderStateList } from '../../../../utils/jk/status-option-list';
    import calTableHeight from '../../../../mixins/cal-dialog-height';
    import {
        productionMachineShiftOutputGet,
        productionMachineShiftOutputUpdate
    } from '../../../../api/production/frontGroupYieldStatistics';
    export default {
        mixins: [calTableHeight],
        components: {
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            defaultTypeCode: {
                type: String,
                default: ''
            },
            pageType: {
                type: String,
                default: 'edit'
            },
            dataId: {
                type: [String, Number],
                default: ''
            }
        },
        data() {
            return {
                saleOrderStateList: saleOrderStateList,
                showDialog: false,
                showLoading: true,
                saveDialogState: false,
                ruleForm: {
                    'belongDate': '',
                    'endEnergy': 0,
                    'endOutputKg': 0,
                    'endOutputM': 0,
                    'energy': 0,
                    'fullQty': 0,
                    'id': 0,
                    'lastUpdateTime': '',
                    'machineCode': '',
                    'machineEfficiency': 0,
                    'machineId': 0,
                    'machineName': '',
                    'outputKg': 0,
                    'outputM': 0,
                    'processCode': '',
                    'processId': 0,
                    'processName': '',
                    'productName': '',
                    'shiftCode': '',
                    'shiftId': 0,
                    'shiftName': '',
                    'sortNum': 0,
                    'startEnergy': 0,
                    'startOutputKg': 0,
                    'startOutputM': 0,
                    'strSpeed': '',
                    'workshopCode': '',
                    'workshopId': 0,
                    'workshopName': ''
                },
                rules: {
                    customerId: [{ required: true, trigger: 'change' }],
                    productId: [{ required: true, trigger: 'change' }],
                    saleOrderQty: [{ required: true, trigger: 'change' }],
                    saleOrderDate: [{ required: true, trigger: 'change' }]
                }
            };
        },
        methods: {
            getParamData() {
                const params = JSON.parse(JSON.stringify(this.ruleForm));
                if (!this.dataId) delete params.id;
                return params;
            },
            createAndUpdateRequest() {
                this.saveDialogState = true;
                const api = productionMachineShiftOutputUpdate;
                api(this.getParamData()).then(res => {
                    this.saveDialogState = false;
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-visible-change', false);
                    }
                });
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.createAndUpdateRequest();
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getDetailRequest() {
                return productionMachineShiftOutputGet({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res || {};
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                if (!this.dataId) {
                    this.$set(this.ruleForm, 'saleOrderDate', formatDate(Date.now()));
                    this.$set(this.ruleForm, 'deliveryDateTo', formatDate(Date.now() + 7 * 24 * 60 * 60 * 1000));
                }
                if (this.dataId) await this.getDetailRequest();
                this.$nextTick(() => {
                    this.$refs.ruleForm.clearValidate();
                });
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
// 解决在生产订单编辑页打开时全局的margin-bottom-10被覆盖的问题
.margin-bottom-10 {
  margin-bottom: 10px;
}
</style>
